{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}项目管理{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4 fade-in">
                <div>
                    <h2 class="mb-1">
                        <i class="fas fa-project-diagram me-2 text-primary"></i>项目管理
                    </h2>
                    <p class="text-muted mb-0">管理教务项目信息和预算分配</p>
                </div>
                <div class="btn-group">
                    <a href="{% url 'common:import_projects_page' %}" class="btn btn-info">
                        <i class="fas fa-upload me-1"></i>导入项目数据
                    </a>
                    <a href="{% url 'common:export_projects' %}" class="btn btn-success">
                        <i class="fas fa-file-excel me-1"></i>导出Excel
                    </a>
                    <a href="{% url 'projects:project_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>创建新项目
                    </a>
                </div>
            </div>

            <!-- 搜索表单 -->
            <div class="card mb-4">
                <div class="card-body search-form">
                    <h5 class="card-title">搜索项目</h5>
                    {% crispy form %}
                </div>
            </div>

            <!-- 项目列表 -->
            <div class="card">
                <div class="card-body">
                    {% if projects %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>项目名称</th>
                                        <th>学期</th>
                                        <th>教务负责人</th>
                                        <th>项目经费</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for project in projects %}
                                    <tr>
                                        <td>
                                            <a href="{% url 'projects:project_detail' project.pk %}" 
                                               class="text-decoration-none fw-bold">
                                                {{ project.name }}
                                            </a>
                                        </td>
                                        <td>{{ project.get_semester_display_name }}</td>
                                        <td>{{ project.admin_manager.get_full_name|default:project.admin_manager.username }}</td>
                                        <td>¥{{ project.budget|floatformat:2 }}</td>
                                        <td>{{ project.created_at|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="{% url 'projects:project_detail' project.pk %}" 
                                                   class="btn btn-outline-info" title="查看详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{% url 'projects:project_edit' project.pk %}" 
                                                   class="btn btn-outline-warning" title="编辑">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" 
                                                        class="btn btn-outline-danger" 
                                                        title="删除"
                                                        onclick="deleteProject({{ project.pk }}, '{{ project.name|escapejs }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        {% if page_obj.has_other_pages %}
                        <nav aria-label="项目分页">
                            <ul class="pagination justify-content-center mt-4">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.college %}&college={{ request.GET.college }}{% endif %}">首页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.college %}&college={{ request.GET.college }}{% endif %}">上一页</a>
                                    </li>
                                {% endif %}

                                <li class="page-item active">
                                    <span class="page-link">
                                        第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
                                    </span>
                                </li>

                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.college %}&college={{ request.GET.college }}{% endif %}">下一页</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.college %}&college={{ request.GET.college }}{% endif %}">末页</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}

                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">暂无项目</h5>
                            <p class="text-muted">点击上方按钮创建第一个项目</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除项目 "<span id="projectName"></span>" 吗？</p>
                <p class="text-danger"><small>此操作不可撤销，项目下的所有子项目也将被删除。</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let projectToDelete = null;

function deleteProject(projectId, projectName) {
    projectToDelete = projectId;
    document.getElementById('projectName').textContent = projectName;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

document.getElementById('confirmDelete').addEventListener('click', function() {
    if (projectToDelete) {
        fetch(`/projects/${projectToDelete}/delete/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('删除失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('删除失败，请重试');
        });
        
        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
    }
});
</script>
{% endblock %}